
var map = new maptalks.Map('map', {
  center: [-0.113049, 51.498568],
  zoom: 8,
  baseLayer: new maptalks.TileLayer('base', {
    urlTemplate: '$(urlTemplate)',
    subdomains: $(subdomains),
    attribution: '$(attribution)'
  })
});

var layer = new maptalks.VectorLayer('layer', {
  'collision': true,
  'collisionDelay': 250,
  'forceRenderOnMoving': true,
  'forceRenderOnZooming': true,
  'forceRenderOnRotating': true,
  // debug:true
}).addTo(map);
// layer.on('layerload', () => {
//     console.log('layerload')
// });

function randomCoordinates() {
  var coordinates = [];
  var center = map.getCenter();
  var x = center.x, y = center.y;
  while (coordinates.length < 1000) {
    var lng = x + Math.random() - 0.5, lat = y + Math.random() * 0.6 - 0.3;
    coordinates.push([lng, lat]);
  }
  return coordinates;
}

var url = '';
var points = randomCoordinates().map(function (c, index) {
  var point = new maptalks.Marker(c, {
    zIndex: 2000 - index,
    symbol: {
      markerFile: url,
      markerWidth: 40,
      markerHeight: 40,
      textName: index,
      textSize: 12,
      textDy: -26,
      textFill: '#fff'
    }
  });
  return point;
});

layer.addGeometry(points);

function updateCollision(e) {
  layer.getGeometries().forEach(function (marker) {
    marker.options.collision = e.target.checked;
  });
  layer.getRenderer().draw();
}
document.getElementById('checkbox').addEventListener('change', updateCollision);
